<template>
    <div>
        <Row style="margin-top:20px;">
            <Col span="24" class="echarts-box" style="background-color: rgba(0, 59, 152, 0.02);padding-top:5px;">
                <div class="typeSanBox" v-if="JSON.stringify(options3)=='{}'">
                    <span style="color:#697786;font-size:12px;font-weight:bold;position:absolute;top:3px;left:15px;">总体辨识趋势</span>
                    <div>
                        <img src="../../../assets/images/process-no-data.png" />
                        <span>暂无数据</span>
                    </div>
                </div>
                <v-chart v-else ref="e4" :style="{width:'100%',height: '300px',}" :options="options3" :auto-resize="true"></v-chart>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {
    data(){
        return{
            options3:{}
        }
    },
    mounted(){
        window.addEventListener("resize", this.resizeTheChart)
    },
    methods:{
        resizeTheChart(){
            if (this.$refs.e4) {
                this.$refs.e4.resize()
            }
        },
        drawLine(obj){
            this.options3 = {}
            if(obj.length>0){
                let xAxisData = [],seriesOneData = [],seriesTwoData = []
                obj.forEach(e => {
                    xAxisData.push(e.yearMonth)
                    seriesOneData.push(e.totalCount)
                    seriesTwoData.push(e.count)
                })
                this.options3 = {
                    title: { 
                        text: '总体辨识趋势',
                        subtext: '',
                        left: 'left',
                        textStyle:{
                            fontWeight:'bold',
                            color:'#697786',
                            fontSize:12
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        // left: 10,
                        data: ['总体辨识', '辨识审核']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxisData,
                        axisLine: {  
                            lineStyle: {
                                color: "#A0A4AA",
                            }
                        },
                        axisTick:{
                            "show":false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {  //这是y轴文字颜色
                            lineStyle: {
                                color: "#A0A4AA",
                            },
                            "show":false
                        },
                        axisTick:{
                            "show":false
                        }
                    },
                    series: [
                        {
                            name: '总体辨识',
                            type: 'line',
                            // stack: '总量',
                            itemStyle: {
                                normal: {
                                    color: '#8cd5c2', //改变折线点的颜色
                                    lineStyle: {
                                        color: '#8cd5c2' //改变折线颜色
                                    }
                                }
                            },
                            data: seriesOneData
                        },
                        {
                            name: '辨识审核',
                            type: 'line',
                            // stack: '总量',
                            itemStyle: {
                                normal: {
                                    color: '#5B8FF9', //改变折线点的颜色
                                    lineStyle: {
                                        color: '#5B8FF9' //改变折线颜色
                                    }
                                }
                            },
                            data: seriesTwoData
                        },
                    ]
                }
            }
        },
    }
}
</script>